<template>
  <v-card
    class="student-card"
    :class="[statusClass, { 'card-present': student.arrival_status === 'present' }]"
    variant="flat"
    elevation="0"
  >
    <v-card-text class="pa-3">
      <div class="d-flex align-center mb-2">
        <v-avatar :color="avatarColor" size="40" class="me-3">
          <span class="text-white font-weight-bold">{{ student.name.charAt(0) }}</span>
        </v-avatar>
        
        <div class="flex-grow-1">
          <h4 class="text-subtitle-1 font-weight-bold mb-0">{{ student.name }}</h4>
          <p class="text-caption text-medium-emphasis mb-0">{{ student.student_no }}</p>
        </div>
        
        <v-chip
          :color="statusColor"
          :variant="student.arrival_status ? 'elevated' : 'outlined'"
          size="small"
          class="status-chip"
        >
          {{ statusText }}
        </v-chip>
      </div>
      
      <!-- 时间信息 -->
      <div v-if="student.arrival_time" class="d-flex align-center mb-2">
        <v-icon size="16" class="me-2 text-medium-emphasis">mdi-clock</v-icon>
        <span class="text-caption">{{ formattedTime }}</span>
      </div>
      
      <!-- 备注信息 -->
      <div v-if="student.notes" class="notes-section mb-2">
        <v-icon size="14" class="me-1 text-medium-emphasis">mdi-note-text</v-icon>
        <span class="text-caption">{{ student.notes }}</span>
      </div>
      
      <!-- 操作按钮区域 -->
      <div class="actions-section mt-2">
        <!-- 入园管理页面：只显示请假按钮和备注按钮 -->
        <div v-if="isArrivalPage" class="d-flex gap-2">
          <v-btn
            size="small"
            color="orange"
            variant="outlined"
            prepend-icon="mdi-calendar-remove"
            @click.stop="$emit('request-leave', student)"
          >
            请假
          </v-btn>
          <v-btn
            size="small"
            color="primary"
            variant="outlined"
            prepend-icon="mdi-note-edit"
            @click.stop="$emit('edit-notes', student)"
          >
            备注
          </v-btn>
        </div>
        
        <!-- 其他页面：显示快速操作按钮 -->
        <div v-else-if="showQuickActions" class="quick-actions">
          <v-btn-group variant="outlined" density="compact" divided>
            <v-btn
              size="small"
              :color="student.arrival_status === 'present' ? 'green' : 'grey'"
              @click.stop="quickUpdate('present')"
            >
              <v-icon size="16">mdi-check</v-icon>
            </v-btn>
            <v-btn
              size="small"
              :color="student.arrival_status === 'leave' ? 'orange' : 'grey'"
              @click.stop="quickUpdate('leave')"
            >
              <v-icon size="16">mdi-calendar-remove</v-icon>
            </v-btn>
            <v-btn
              size="small"
              :color="student.arrival_status === 'abnormal' ? 'red' : 'grey'"
              @click.stop="quickUpdate('abnormal')"
            >
              <v-icon size="16">mdi-alert</v-icon>
            </v-btn>
          </v-btn-group>
        </div>
      </div>
    </v-card-text>
    
    <!-- 状态指示器 -->
    <div class="status-indicator" :class="statusIndicatorClass"></div>
  </v-card>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  student: {
    type: Object,
    required: true
  },
  showQuickActions: {
    type: Boolean,
    default: true
  },
  // 是否为入园管理页面 - 入园管理页面不显示快速操作按钮
  isArrivalPage: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update-status', 'quick-update', 'request-leave', 'edit-notes'])

// 计算属性
const statusText = computed(() => {
  const statusMap = {
    present: '已到',
    leave: '请假',
    abnormal: '异常',
    null: '未到',
    undefined: '未到'
  }
  return statusMap[props.student.arrival_status] || '未到'
})

const statusColor = computed(() => {
  const colorMap = {
    present: 'green',
    leave: 'orange',
    abnormal: 'red',
    null: 'grey',
    undefined: 'grey'
  }
  return colorMap[props.student.arrival_status] || 'grey'
})

const avatarColor = computed(() => {
  const colors = ['primary', 'secondary', 'accent', 'info', 'success']
  const index = props.student.name.charCodeAt(0) % colors.length
  return colors[index]
})

const statusClass = computed(() => {
  return `status-${props.student.arrival_status || 'absent'}`
})

const statusIndicatorClass = computed(() => {
  return `indicator-${props.student.arrival_status || 'absent'}`
})

const formattedTime = computed(() => {
  if (!props.student.arrival_time) return ''
  
  const time = props.student.arrival_time
  if (time.includes(':')) {
    return time.substring(0, 5) // HH:MM
  }
  return time
})

// 方法
const quickUpdate = (status) => {
  emit('quick-update', { student: props.student, status })
}
</script>

<style scoped>
.student-card {
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none !important;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

.student-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
}

.card-present {
  background: linear-gradient(135deg, #e8f5e8 0%, #f0f9f0 100%);
}

/* 状态背景颜色 */
.status-present {
  background: linear-gradient(135deg, #e8f5e8 0%, #f0f9f0 100%);
  color: #2e7d32;
}

.status-leave {
  background: linear-gradient(135deg, #fff3e0 0%, #ffeaa7 100%);
  color: #e65100;
}

.status-abnormal {
  background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
  color: #c62828;
}

.status-absent {
  background: linear-gradient(135deg, #f5f5f5 0%, #eeeeee 100%);
  color: #424242;
}



/* 状态指示器 */
.status-indicator {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 20px 0;
}

.indicator-present {
  border-color: transparent #4caf50 transparent transparent;
}

.indicator-leave {
  border-color: transparent #ff9800 transparent transparent;
}

.indicator-abnormal {
  border-color: transparent #f44336 transparent transparent;
}

.indicator-absent {
  border-color: transparent #9e9e9e transparent transparent;
}



/* 快速操作按钮 */
.quick-actions {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.student-card:hover .quick-actions {
  opacity: 1;
}

/* 备注样式 */
.notes-section {
  background: rgba(33, 150, 243, 0.08);
  border-radius: 4px;
  padding: 4px 8px;
  border-left: 2px solid #2196F3;
  display: flex;
  align-items: flex-start;
}



/* 家长信息 */
.parent-info {
  font-size: 0.75rem;
}

/* 状态芯片 */
.status-chip {
  font-weight: 600;
  font-size: 0.75rem;
}

/* 全局样式调整 */
.student-card .v-card-text {
  padding: 12px !important;
}

.quick-actions .v-btn {
  min-width: 32px !important;
}

/* 响应式设计 */
@media (max-width: 600px) {
  .v-avatar {
    width: 32px !important;
    height: 32px !important;
  }
  
  .quick-actions {
    opacity: 1; /* 在移动设备上始终显示 */
  }
  
  .quick-actions .v-btn-group {
    flex-wrap: wrap;
  }
  
  .quick-actions .v-btn {
    flex: 1;
    min-width: 40px !important;
  }
}

/* 动画效果 */
.student-card {
  animation: slideInUp 0.4s ease-out;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 深色主题适配 */
.v-theme--dark .student-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
}

.v-theme--dark .card-present {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.1) 0%, rgba(76, 175, 80, 0.05) 100%);
}

.v-theme--dark .notes-section {
  background: rgba(255, 255, 255, 0.05);
}
</style>
